<script setup>
import { wxLoginAPI } from '@/services/login'
import { useUserStore } from '@/stores'
import { ref, onMounted, defineProps } from 'vue'
// 获取 code 登录凭证
let code = ''
const toastRef = ref()
const login = async () => {
  const res = await wx.login()
  code = res.code
  const userInfo = await wxLoginAPI({ code })
  const userStore = useUserStore()
  userStore.setToken(userInfo.data.token) //将token存入storage中
  userStore.getUser() //获取用户基本数据存入到storage中
  toastRef.value.show({
    type: 'success',
    message: '登陆成功',
    complete() {
      uni.navigateBack({ delta: 1 }) //返回上个页面
    },
  })
}
</script>

<template>
  <view class="viewport">
    <view class="logo">
      <!-- <image src="@/static/images/logo2.png"></image> -->
    </view>
    <view class="login">
      <!-- 小程序端授权登录 -->
      <button class="button phone" @click="login">
        <uni-icons type="weixin" size="24"></uni-icons>
        快捷登录
      </button>
    </view>
    <uv-toast ref="toastRef" position="top"></uv-toast>
  </view>
</template>

<style lang="scss">
page {
  height: 100%;
  background-image: url(https://crop-doctor.oss-cn-beijing.aliyuncs.com/wechat/background2.png);
}

.viewport {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20rpx 40rpx;
}

.logo {
  flex: 1;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
  border-radius: 20rpx;
  overflow: hidden;
  image {
    width: 250rpx;
    height: 250rpx;
    margin-top: 15vh;
  }
}

.login {
  display: flex;
  flex-direction: column;
  height: 60vh;
  padding: 40rpx 20rpx 20rpx;

  .button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80rpx;
    font-size: 28rpx;
    border-radius: 72rpx;
    color: #fff;
    .icon {
      font-size: 40rpx;
      margin-right: 6rpx;
    }
  }

  .phone {
    background-color: #28bb9c;
  }
}
</style>
